<template>
		 <Card>
			 <view class="row" v-for="(item,index) in noticeList" :key="index" @click="urgentAlarm(item.alertId)">
				 <view class="row_left">
				 	<image src="../../static/image/index/notice.png" mode=""></image>
				 	 <text>{{item.alertContent}}</text>
				 </view>
				 <view class="row_right">
				 	<image src="../../static/image/index/arrow_right.png" mode=""></image>
				 </view>
			 </view>
			 <view class="noEmpty" v-if="noticeList.length === 0">
			 	暂无告警信息~~~
			 </view>
		 </Card>
		 <!-- 告警状态 -->
		 <view class="alarmStatus" style="background:url('../../static/image/index/bg.png') no-repeat center;background-size: 100% 100%">
		 	<view class="alarmStatus_head">
		 		<text>告警状态</text>
				<view class="right" @click="tomoreList">
					<text>更多</text>
					<image src="../../static/image/index/arrow_right.png" mode=""></image>
				</view>
		 	</view>
			<view class="content">
				<view class="content_row">
					<view class="content_row_item" v-for="(item,index) in alarmStatusList[0]" :key="index">
						<text>{{alertInfo[item.props] ?? ""}}</text>
						<text>{{item.title}}</text>
					</view>
				</view>
				<view class="line">
					<image src="../../static/image/index/line.png" mode=""></image>
				</view>
				<view class="content_row">
				<view class="content_row_item" v-for="(item,index) in alarmStatusList[1]" :key="index">
				<text>{{alertInfo[item.props] ?? ""}}</text>
				<text>{{item.title}}</text>	
				</view>
				</view>
			</view>
		 </view>
		 <!-- 常用功能 -->
		 <view class="CommonlyUsedFun">
		<view class="useHead">
			<text>常用功能</text>
		</view>
		<Card>
			<view class="UsedFunList">
				<image :src="url" mode="" v-for="(url,index) in UsedFunList" :key="index" @click="slectFunc(index)"></image>
			</view>
		</Card>
		 </view>
		 <!-- 订餐管理 -->
		 <view class="orderManager">
		 <view class="orderManager_title">
		 	<text>订餐管理</text>
		 </view>
		 	<view class="orderManagerList">
		 		<image :src="url"  v-for="(url,index) in ManagerList" 
				:key="index" @click="foodManage(index)"></image>
		 	</view>
		  </view>
</template>
<script setup>
	import {getAlertTypeQuality,getAlertList} from '@/api/alarm.js'
	import {onMounted, onUnmounted, ref} from 'vue'
	import {onShow,onHide} from '@dcloudio/uni-app'
    // 查看预警列表
	const tomoreList = ()=>{
		uni.navigateTo({
			url:`/packageAlarmNotice/pages/processFlow/processFlow`
		})
	}
	// 前往紧急告警
	const urgentAlarm = (id)=>{
		uni.navigateTo({
			url:`/packageAlarmNotice/pages/urgentAlarm/urgentAlarm?alertId=${id}`
		})
	}
	const alarmStatusList = [
		[
			{
				props:"breathLow",
				title:"呼吸过低"
			},
			{
				props:"breathHigh",
				title:"呼吸过高"
			},

			{
				props:"fall",
				title:"疑似跌倒"
			}
		],
		[
		{
				props:"heartRateLow",
				title:"心率过低"
		},
		{
			props:"heartRateHigh",
			title:"心率过高"
		},
		{
			props:"dangerHelp",
			title:"危险求助"
		}
	
		],
		[
			{
				props:"stationaryResidence",
				title:"静止驻留提醒"
			},	
			{
				props:"bodyMove",
				title:"夜间持续动作告警"
			},
		]
	]
	const UsedFunList = [
		"../../static/image/index/fun01.png",
		"../../static/image/index/fun02.png",
		"../../static/image/index/fun03.png",
		"../../static/image/index/fun04.png",
	]
	const ManagerList = [
		"../../static/image/index/order01.png",
		"../../static/image/index/order02.png",
	]
	// 餐饮管理
	const foodManage = (index)=>{
		let url = ""
		switch(index){
			case 0:
			url="/packagePickUpFood/pages/index/index"
			break;
			case 1:
			url = "/packageOrderFood/pages/index/index"
			break;
		}
			uni.navigateTo({
				url
			})
	}
	// 选择功能
	const slectFunc = (index)=>{
		let url = ""
		switch(index){
			case 0: //数据输入
			url="/packageDataInt/pages/index/index"
			break;
			case 1: //探望申请
			url="/packageVisite/pages/index/index"
			break;
			case 2: //请假审批
			url="/packageLeaveDate/pages/index/index"
			break;
			case 3: //拿药审批
			url="/packageTakeMedicine/pages/index/index"
			break;
		}
		uni.navigateTo({
			url
		})
	}
	// 用于保存定时器ID
	const intervalId = ref(null);
	// 获取告警信息
	const noticeList = ref([])
	const reqAlertList = async()=>{
	const {userId} = uni.getStorageSync("userInfo")
	 if(!userId) return
	const {code,data:res} = await getAlertList({
		userId
	})
	if(code === 200){
		noticeList.value = noticeList.value.concat(res) 
	}
	}

	// 启动轮询
	const startPolling = () => {
	  const interval = 5000; // 轮询间隔时间，这里设置为3秒
	  intervalId.value = setInterval(reqAlertList, interval);
	};
	
	// 停止轮询
	const stopPolling = () => {
	  if (intervalId.value) {
	    clearInterval(intervalId.value);
	  }
	};
	onShow(startPolling)
	onHide(stopPolling)
	onUnmounted(
	stopPolling	
	)
	// 获取告警状态数量
	const alertInfo =ref({	
		bodyExist:"",
		bodyMove:"",
		breathHigh:"",
		breathLow:"",
		heartRateHigh:"",
		heartRateLow:""
	})
	const getAlertNum = async()=>{
		try{
		const {code,data:res} = await getAlertTypeQuality()
		if(code === 200){
			alertInfo.value = res
		}
		}catch(e){
			//TODO handle the exception
		}
	}
	getAlertNum()
</script>
<style lang="less" scoped>
	.row{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.row_left{
			display: flex;
			align-items: center;
			>image{
			width: 36rpx;
			height: 38rpx;
			margin-right: 28rpx;
			}
			text{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}
	
		.row_right{
			>image{
				width: 12rpx;
				height: 24rpx;
			}
		}
	}
	.alarmStatus{
		position: relative;
		margin-top: 40rpx;
		padding: 20rpx 0 45rpx;
		.line{
		margin: 10rpx 0 25rpx;
		image{
			height: 2rpx;
			width: 100%;
		}
		}
		.alarmStatus_head{
			padding: 0 28rpx;
			display: flex;
			justify-content: space-between;
			font-weight: 400;
			font-size: 32rpx;
			margin-bottom: 30rpx;
			color: #3B3B3B;
			.right{
				display: flex;
				align-items: center;
			 >text{
				 font-weight: 300;
				 font-size: 28rpx;
				 color: #3B3B3B;
			 }
			 >image{
				 margin-left: 14rpx;
				 width: 14rpx;
				 height: 26rpx;
			 }
			}
			
		}
		.content_row{
			display: flex;
			justify-content: space-between;
			padding: 0 24rpx;
			.content_row_item{
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
			  text{
				  &:first-child{
					  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
					  font-size: 44rpx;
					  color: #333333;
					margin-bottom: 14rpx;
				  }
				  &:last-child{
					  font-weight: 400;
					  font-size: 28rpx;
					  color: #999999;
				  }
			  }
			}
		}
		.bg{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}
	}
	.CommonlyUsedFun{
		.useHead{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #3B3B3B;
			margin:40rpx 0 30rpx;
				padding: 0 28rpx;
		}
		.UsedFunList{
			display: flex;
			justify-content: space-between;
			image{
				width: 144rpx;
				height: 144rpx;
			}
		}
	
		
	}
	.orderManager{
		.orderManager_title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #3B3B3B;
			margin:40rpx 0 30rpx;
				padding: 0 28rpx;
		}
		.orderManagerList{
			display: flex;
			justify-content: space-between;
			image{
				width: 340rpx;
				height: 160rpx;
			}
		}
	}
	.noEmpty{
		min-height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
	}
</style>